<template>
    <div class="indexMain" id="indexMain">
        <div class="header">
            <div class="leftLogo">
                <img src="@/assets/images/login/childLogo.png" />
            </div>
            <div class="loginOut" @click="signOut">
                <el-tooltip content="退出登录" placement="top-start">
                    <i class="el-icon-switch-button"></i>
                </el-tooltip>
            </div>
        </div>
        <div class="content">
            <div class="item">
                <div class="title">
                    <label>EcoGuard 能源卫士</label>
                    <img src="@/assets/images/login/center/arrow.png" />
                </div>
                <div class="main">
                    <div class="block" @click="gotoUrl('智配魔方')" :class="getBorderColor('智配魔方')">
                        <div>
                            <img src="@/assets/images/login/center/1.png" />
                        </div>
                        <div>
                            <label>智配魔方</label>
                        </div>
                        <div>
                            <p>智能监控电网运行</p>
                            <p>保障安全稳定供电</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('时境智控')" :class="getBorderColor('时境智控')">
                        <div>
                            <img src="@/assets/images/login/center/2.png" />
                        </div>
                        <div>
                            <label> 时境智控 </label>
                        </div>
                        <div>
                            <p>多能源协同调控</p>
                            <p>动态节能降耗超 20%</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('能碳定额')" :class="getBorderColor('能碳定额')">
                        <div><img src="@/assets/images/login/center/3.png" /></div>
                        <div><label> 能碳定额 </label></div>
                        <div>
                            <p>划定能碳管理基线</p>
                            <p>精准管控能耗排放</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('能源钱包')" :class="getBorderColor('能源钱包')">
                        <div><img src="@/assets/images/login/center/4.png" /></div>
                        <div><label> 能源钱包 </label></div>
                        <div>
                            <p>精准计量用能费用</p>
                            <p>预付费模式降本 30%</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('碳迹智算')" :class="getBorderColor('碳迹智算')">
                        <div><img src="@/assets/images/login/center/5.png" /></div>
                        <div><label> 碳迹智算 </label></div>
                        <div>
                            <p>自动核算碳排放数据</p>
                            <p>提供量化决策依据</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('能资智管')" :class="getBorderColor('能资智管')">
                        <div><img src="@/assets/images/login/center/6.png" /></div>
                        <div><label> 能资智管 </label></div>
                        <div>
                            <p>全周期管理能源资产</p>
                            <p>提升利用效率 40%</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('智慧水务')" :class="getBorderColor('智慧水务')">
                        <div><img src="@/assets/images/login/center/7.png" /></div>
                        <div><label> 智慧水务 </label></div>
                        <div>
                            <p>实时监测管网状态</p>
                            <p>智能优化供水效能</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('能碳预测')" :class="getBorderColor('能碳预测')">
                        <div><img src="@/assets/images/login/center/8.png" /></div>
                        <div><label> 能碳预测 </label></div>
                        <div>
                            <p>预判能源碳排趋势</p>
                            <p>支撑低碳决策规划</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('能碳全景魔墙')" :class="getBorderColor('能碳全景魔墙')">
                        <div><img src="@/assets/images/login/center/9.png" /></div>
                        <div><label> 能碳全景魔墙 </label></div>
                        <div>
                            <p>能碳数据可视化</p>
                            <p>辅助高效管理决策</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="title">
                    <label>OpsGuard 运维管家</label>
                    <img src="@/assets/images/login/center/arrow.png" />
                </div>
                <div class="main">
                    <div class="block" @click="gotoUrl('报修管家')" :class="getBorderColor('报修管家')">
                        <div>
                            <img src="@/assets/images/login/center/1.1.png" />
                        </div>
                        <div>
                            <label> 报修管家 </label>
                        </div>
                        <div>
                            <p>一站式报修闭环管理</p>
                            <p>响应速度提升 50%</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('巡检管家')" :class="getBorderColor('巡检管家')">
                        <div>
                            <img src="@/assets/images/login/center/1.2.png" />
                        </div>
                        <div>
                            <label> 巡检管家 </label>
                        </div>
                        <div>
                            <p>智能规划巡检路径</p>
                            <p>覆盖效率提升 60%</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('物费管家')" :class="getBorderColor('物费管家')">
                        <div><img src="@/assets/images/login/center/1.3.png" /></div>
                        <div><label> 物费管家 </label></div>
                        <div>
                            <p>智能管理物业费用</p>
                            <p>精准控费降本增效</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('绿化运维')" :class="getBorderColor('绿化运维')">
                        <div><img src="@/assets/images/login/center/1.4.png" /></div>
                        <div><label> 绿化运维 </label></div>
                        <div>
                            <p>科学养护绿化环境</p>
                            <p>智能提升景观品质</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('外包考核')" :class="getBorderColor('外包考核')">
                        <div><img src="@/assets/images/login/center/1.5.png" /></div>
                        <div><label> 外包考核 </label></div>
                        <div>
                            <p>量化评估外包绩效</p>
                            <p>保障服务标准质量</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('沟盖运维')" :class="getBorderColor('沟盖运维')">
                        <div><img src="@/assets/images/login/center/1.6.png" /></div>
                        <div><label> 沟盖运维 </label></div>
                        <div>
                            <p>实时监测井盖状态</p>
                            <p>保障市政设施安全</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('智慧运维中心')" :class="getBorderColor('智慧运维中心')">
                        <div><img src="@/assets/images/login/center/1.7.png" /></div>
                        <div><label> 智慧运维中心 </label></div>
                        <div>
                            <p>一体化管理运维事务</p>
                            <p>运营效率提升 40%</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('客服智库')" :class="getBorderColor('客服智库')">
                        <div><img src="@/assets/images/login/center/1.8.png" /></div>
                        <div><label> 客服智库 </label></div>
                        <div>
                            <p>智能管理客服知识</p>
                            <p>服务响应提速 30%</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('空间孪生')" :class="getBorderColor('空间孪生')">
                        <div><img src="@/assets/images/login/center/1.9.png" /></div>
                        <div><label> 空间孪生 </label></div>
                        <div>
                            <p>构建数字空间镜像</p>
                            <p>可视化管理物理场景</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="title">
                    <label>SafeGuard 安全哨兵</label>
                    <img src="@/assets/images/login/center/arrow.png" />
                </div>
                <div class="main">
                    <div class="block" @click="gotoUrl('视语智析')" :class="getBorderColor('视语智析')">
                        <div>
                            <img src="@/assets/images/login/center/2.1.png" />
                        </div>
                        <div>
                            <label> 视语智析 </label>
                        </div>
                        <div>
                            <p>智能解析视频语义</p>
                            <p>秒级识别安防事件</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('能安智测')" :class="getBorderColor('能安智测')">
                        <div>
                            <img src="@/assets/images/login/center/2.2.png" />
                        </div>
                        <div>
                            <label> 能安智测 </label>
                        </div>
                        <div>
                            <p>实时监测能源安全</p>
                            <p>毫秒级预警风险隐患</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('环安智测')" :class="getBorderColor('环安智测')">
                        <div><img src="@/assets/images/login/center/2.3.png" /></div>
                        <div><label> 环安智测 </label></div>
                        <div>
                            <p>监测环境安全指标</p>
                            <p>秒级响应异常告警</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('通行管家')" :class="getBorderColor('通行管家')">
                        <div><img src="@/assets/images/login/center/2.4.png" /></div>
                        <div><label> 通行管家 </label></div>
                        <div>
                            <p>智能管控人员通行</p>
                            <p>保障出入安全便捷</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('门锁管家')" :class="getBorderColor('门锁管家')">
                        <div><img src="@/assets/images/login/center/2.5.png" /></div>
                        <div><label> 门锁管家 </label></div>
                        <div>
                            <p>联动智能门锁状态</p>
                            <p>提升安防协同效率</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('人力管家')" :class="getBorderColor('人力管家')">
                        <div><img src="@/assets/images/login/center/2.6.png" /></div>
                        <div><label> 人力管家 </label></div>
                        <div>
                            <p>数字化管理后勤人力</p>
                            <p>资源调度效率提升 50%</p>
                        </div>
                    </div>
                    <div class="block" @click="gotoUrl('安防态势感知中心')" :class="getBorderColor('安防态势感知中心')">
                        <div><img src="@/assets/images/login/center/2.7.png" /></div>
                        <div><label> 安防态势感知中心 </label></div>
                        <div>
                            <p>全局感知安防态势</p>
                            <p>实时预警联动处置</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {PopupCommon} from '@/libs/popupCommon'
import {mapActions} from 'vuex'
import {setToken} from '@/libs/util'
import {AjaxCommon} from '@/libs/apiCommon'
export default {
    name: 'indexMain',
    components: {},
    data() {
        return {
            childSys: [],
            allChildSys: []
        }
    },
    computed: {},
    mounted() {},
    created() {
        this.getPower()
        localStorage.tagNaveList = ''
    },
    methods: {
        ...mapActions(['handleLogOut']),
        signOut() {
            sessionStorage.setItem('ALLMENULIST', '')
            localStorage.removeItem('userInfo')
            sessionStorage.setItem('menuInfo', '')
            // localStorage.removeItem('token')
            setToken('')
            //   this.$router.replace({
            //     name: "userLogin",
            //   });
            localStorage.tagNaveList = ''
            this.handleLogOut().then(() => {
                this.$router.replace({
                    name: 'userLogin'
                })
            })
        },
        getBorderColor(name) {
            const sysItem = this.childSys?.find((t) => t.sys_name == name)
            return sysItem == null ? 'borderTransparent' : ''
        },
        gotoUrl(title) {
            console.log(title, this.childSys)
            const sysItem = this.childSys?.find((t) => t.sys_name == title)
            if (sysItem != null) {
                // 子系统信息  sys_code sys_function sys_guid sys_url
                sessionStorage.setItem('childSys', JSON.stringify(sysItem))
                // 获取子系统 权限
                AjaxCommon(`/api/role/GetRoleSysTwoMenu/${sysItem.sys_guid}`, 'get', null).then((res) => {
                    const data = res.data.Message ?? []
                    sessionStorage.setItem('childSysMenuPower', JSON.stringify(data))
                    // 这里菜单还要有个是否首页的
                    this.$router.push({
                        name: sysItem.sys_url
                    })
                })
            } else {
                PopupCommon.notify('info', '暂无权限')
            }

            // if (this.childSys?.find)
            //     if (title && (title == '时境智控' || title == '能源钱包')) {
            //         // 暂时只有这个
            //         const systemName = title == '能源钱包' ? '综合能源计量与预付费系统' : '全域节能协同管理系统'
            //         sessionStorage.setItem('systemName', systemName)
            //         console.log('123123123')
            //         this.$router.push({
            //             name: 'mcMainIndex',
            //             params: {title: systemName}
            //         })
            //     } else {
            //         PopupCommon.notify('info', '暂无权限')
            //     }
        },
        // 获取权限
        getPower() {
            try {
                const self = this
                AjaxCommon(`/api/Role/GetSysByUser`, 'get', null).then((res) => {
                    self.allChildSys = res.data?.Message
                    const data = res.data?.Message?.filter((t) => t.status == 'on')
                    console.log(data)

                    self.childSys = data
                })
            } catch (error) {
                this.signOut()
            }
        }
    }
}
</script>

<style scoped lang="scss">
.indexMain {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #070707;
    &::-webkit-scrollbar {
        width: 0px; // 滚动条宽度
        display: none;
    }
    .header {
        background-color: #191f46;
        height: 80px;
        width: 100%;
        display: flex;
        color: #fff;
        justify-content: center;
        align-items: center;
        .leftLogo {
            text-align: left;
            flex: 1;
            height: 80px;
            img {
                height: 100%;
            }
        }
        .loginOut {
            text-align: right;
            .el-icon-switch-button {
                color: #fff;
                font-size: 30px;
                padding-right: 30px;
                cursor: pointer;
            }
        }
    }
    .content {
        // height: calc(100vh - 80px);
        width: 100%;
        // 先随便给个背景图，需要背景图片
        background-color: #070707;
        display: flex;
        flex-direction: column;
        color: #fff;
        .item {
            flex: 1;
            overflow: hidden;
            margin: 20px 40px;
            .title {
                height: 32px;
                line-height: 32px;
                display: flex;
                margin-bottom: 20px;
                label {
                    font-size: 24px;
                    margin-right: 15px;
                }
            }
            .main {
                display: flex;
                width: 100%;
                height: calc(100% - 52px);
                overflow: hidden;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 30px;
                .borderTransparent {
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    background-color: rgba(255, 255, 255, 0.1) !important;
                }
                .block {
                    cursor: pointer;
                    background-color: #171d45;
                    text-align: center;
                    border-radius: 10px;
                    flex-direction: row;
                    // width: calc((100% - 240px) / 9);
                    width: 176px;
                    height: 189px;
                    div {
                        cursor: pointer;
                        align-items: center;
                        justify-content: center;
                        display: flex;
                        flex-direction: column;
                        label {
                            font-size: 20px;
                            cursor: pointer;
                        }
                        &:nth-child(1) {
                            height: 50%;
                        }
                        &:nth-child(2) {
                            height: 16%;
                        }
                        &:nth-child(3) {
                            height: 34%;
                            padding: 0 10px;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}
</style>
